<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--semantic-ui的cdn引入-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>

<!--导航部分-->
<nav th:replace="_fragments ::menu" class="ui inverted attached segment">
    <div class="container">
        <div class="ui inverted stackable menu">

            <h2 class="ui teal header item m-padding-up-dowm-min">LOG</h2>

            <a href="" class="item"><i class="home icon"></i>首页</a>

            <a href="" class="item"><i class="edit icon"></i>分类</a>

            <a href="" class="item"><i class="tags icon"></i>标签</a>

            <a href="" class="item"><i class="print icon"></i>关于我</a>

            <!--搜索栏-->
            <div class="right item">
                <div class="ui icon inverted transparent input">
                    <i class="search link icon"></i>
                    <input type="text" placeholder="搜索">
                </div>
            </div>
        </div>
    </div>
</nav>

<!--中间内容-->
<div class="m-footer-padding-up-dowm-min transparent animate__animated animate__fadeInLeft">
    <div class="ui container">

        <!--标头-->
        <div class="ui top attached segment">
            <!--指定两列-->
            <div class="ui two column grid">

                <div class="column">
                    <h3 class="ui teal header">分类</h3>
                </div>

                <div class="column right aligned">
                    共<h3 class="ui orange header m-inline-block" th:text="${#arrays.length(types)}">3</h3>个
                </div>
            </div>
        </div>

        <!--分类-->
        <div class="ui attached segment">

            <div class="ui labeled button" th:each="type : ${types}">
                <a href="#" class="ui basic  button" th:text="${type.name}" th:classappend="${type.id == activeTypeId} ? 'teal'" th:href="@{/types/{id}(id = ${type.id})}">分类1</a>
                <div class="ui basic left pointing label" th:classappend="${type.id == activeTypeId} ? 'teal'" th:text="${#arrays.length(type.blogs)}">24</div>
            </div>

        </div>

        <!--每个分类对应的文章-->
        <div class="ui segment">
            <div class="ui vertical segment" th:each="blog : ${page.content}">
            <div class="ui grid">
                <!--文章主体部分-->
                <div class="eleven wide column">
                    <!--文章标题-->
                    <h3 class="ui header"><a href="#" style="color: #000000" th:text="${blog.title}" th:href="@{/blog/{id}(id = ${blog.id})}">标题</a></h3>
                    <!--文章内容-->
                    <p th:text="${blog.description}">
                        文章描述
                    </p>
                    <!--底部的按钮-->
                    <div class="ui grid">
                        <div class="eleven wide column">
                            <div class="ui horizontal link list mini">
                                <!--跟新时间-->
                                <div class="item">
                                    <i class="user icon"></i><span th:text="${blog.user.nickname}">lgb</span>
                                </div>
                                <!--跟新时间-->
                                <div class="item">
                                    <i class="book icon"></i><span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2023-7-13</span>
                                </div>
                                <!--浏览次数-->
                                <div class="item">
                                    <i class="eye icon"></i><span th:text="${blog.view_times}">114514</span>
                                </div>
                            </div>
                        </div>

                        <!--所属分类-->
                        <div class="five wide column right aligned">
                            <a href="#" class="ui basic teal mini label" th:text="${blog.type.name}">所属分类</a>
                        </div>
                    </div>
                </div>

                <!--图片部分-->
                <div class="five wide column">
                    <img src="https://picsum.photos/id/237/200/150" th:src="@{${blog.picture}}" class="ui rounded image">
                </div>
            </div>
        </div>
        </div>

        <!--分页按钮-->
        <div class="ui bottom attached segment">
            <!--指定两列-->
            <div class="ui two column grid">

                <div class="column">
                    <button class="ui teal basic mini button" th:href="@{/(page = ${page.number} - 1)}">上一页</button>
                </div>

                <div class="column right aligned">
                    <button class="ui teal basic mini button" th:href="@{/(page = ${page.number} + 1)}">下一页</button>
                </div>
            </div>
        </div>

    </div>
</div>


<!--底部footer-->
<footer th:replace="_fragments ::footer" class="ui inverted center aligned vertical segment m-footer-padding-up-dowm-min">
    <div class="container">
        <!--grid:横向分成16份,底下的元素为3+3+3+7-->
        <div class="ui divided  inverted grid">

            <div class="three wide column">
                <h4 class="ui inverted header">二维码</h4>
                <img src="..\static\images\二维码.png"  style="width: 80px;">
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header">个人博客</h4>
                <div class="ui inverted list link">
                    <a href="#" class="item">1.0 xxx</a>
                    <a href="#" class="item">2.0 xxx</a>
                    <a href="#" class="item">3.0 xxx</a>
                </div>
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted list link">
                    <a href="#" class="item">微信:13776710591</a>
                    <a href="#" class="item">QQ:2899847639</a>
                    <a href="#" class="item">GitHub:xxxxxxx</a>
                </div>
            </div>

            <div class="seven wide column">
                <h4 class="ui inverted header">个人博客</h4>
                <p>
                    emmm,你要说点什么
                </p>
            </div>
        </div>

        <!--一条线-->
        <div class="ui inverted section divider"></div>
        <p>emmm,你要说点什么</p>

    </div>
</footer>

<!--引入jquery和semantic-ui-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>

<style>
    /*semantic-ui注释覆盖需要加important*/

    /*用于调整导航上下边距*/
    .m-padding-up-dowm-min{
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
    }

    /*用于调整footer的上下边距*/
    .m-footer-padding-up-dowm-min{
        padding-top: 5em !important;
        padding-bottom: 5em !important;
    }

    /*在一行内显示*/
    .m-inline-block{
        display: inline-block !important;
    }
</style>
</html>